<template>
  <div class="write-answer-container">
    <h1 class="question" v-if="isFullScreen">在技校读书是不是在浪费时间?</h1>
    <div v-else class="author-info">
      <img src="../../assets/images/avatar.jpg" alt="" />
      <span>czw</span>
    </div>
    <div
      class="main"
      :style="{
        width: isFullScreen ? '68.8rem' : '100%',
        paddingTop: isFullScreen ? '5rem' : 0,
      }"
    >
      <answer-editor class="editor" ref="answerEditor"> </answer-editor>
    </div>
    <div class="function-area" :class="{ fix: isFullScreen }">
      <div
        :style="{ width: isFullScreen ? '68.8rem' : '100% ' }"
        class="function"
      >
        <Poptip class="pop" :placement="placeMent">
          <button class="set"><Icon type="ios-settings" />设置</button>
          <div slot="title">
            <li
              v-for="(item, index) in transfer"
              :key="index"
              class="li-list"
              @click="changeIndex(transfer, index)"
            >
              <Icon type="md-checkmark" v-if="item.isClick" class="check" />
              {{ item.msg }}
            </li>
          </div>
          <div slot="content">
            <li
              v-for="(item, index) in comment"
              :key="index"
              class="li-list"
              @click="changeIndex(comment, index)"
            >
              <Icon type="md-checkmark" v-if="item.isClick" class="check" />
              {{ item.msg }}
            </li>
          </div>
        </Poptip>
        <button class="submit" @click="submit">提交回答</button>
      </div>
    </div>
    <button class="quit" @click="quitFullScreen" v-if="isFullScreen">
      <Icon type="ios-resize" />退出全屏
    </button>
    <button class="enter-full" title="全屏" v-else>
      <Icon type="ios-qr-scanner" size="20" @click="goFullScreen" />
    </button>
  </div>
</template>

<script>
import axios from "@/util/axios";

import AnswerEditor from "@/components/question/Editor/AnswerEditor";

export default {
  name: "WriteAnswer",
  props: {
    questionId: {
      type: Number,
    },
  },
  data() {
    return {
      transfer: [
        {
          isClick: true,
          msg: "允许规范转载",
        },
        {
          isClick: false,
          msg: "允许付费转载",
        },
        {
          isClick: false,
          msg: "禁止转载",
        },
      ],
      comment: [
        {
          isClick: true,
          msg: "允许任何人评论",
        },
        {
          isClick: false,
          msg: "评论由我筛选后显示",
        },
        {
          isClick: false,
          msg: "允许我关注的人评论",
        },
      ],
      // editorOption: {
      //   placeholder: "写回答...", //提示
      //   syntax: true, //语法检测
      //   modules: {
      //     toolbar: [
      //       ["bold", "italic", "underline"], //加粗，斜体，下划线
      //       ["blockquote", "code-block"], //引用，代码块
      //       [{ header: 1 }], // 标题
      //       [{ list: "ordered" }, { list: "bullet" }], //列表

      //       [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

      //       ["image"], //上传图片
      //     ],
      //   },
      // },
      // content: null,
      isFullScreen: this.$store.state.fullScreen,
    };
  },
  methods: {
    //改变index
    changeIndex(targetArray, targetIndex) {
      targetArray.forEach((item, index, array) => {
        if (index === targetIndex) {
          item.isClick = true;
        } else {
          item.isClick = false;
        }
      });
    },
    goFullScreen() {
      this.$store.commit("changeFullScreen", true);
    },
    quitFullScreen() {
      this.$store.commit("changeFullScreen", false);
    },
    //提交回答
    submit() {
      //获取内容
      let content = this.$refs.answerEditor.$refs.editor.content;
      //对回答内容进行判空处理
      if (content) {
        console.log("成功提交了");
        //发送请求
        axios
          .post("answer/answerQuestion", {
            data: {
              content: content,
              auser_id: localStorage.getItem("userId"),
              aquestion_id: this.questionId, //问题的id
            },
          })
          .then((res) => {
            console.log(res);
          });
      } else {
        this.$Message.error("请输入内容");
      }
    },
  },
  computed: {
    placeMent() {
      return this.$store.state.fullScreen ? "top" : "bottom";
    },
  },
  components: {
    AnswerEditor,
  },
};
</script>

<style lang="scss" >
.write-answer-container {
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 100%;
  .question {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 2rem 2rem;
    font-size: 2.2rem;
    font-weight: 600;
  }
  .author-info {
    display: flex;
    padding: 1.6rem 2rem;
    align-items: center;
    height: 7rem;
    img {
      height: 100%;
      margin-right: 1rem;
    }
    span {
      font-weight: 600;
    }
  }
  .main {
    position: relative;
    height: 100%;
    margin: 0 auto;
  }
  .function-area {
    width: 100%;
    height: 5.2rem;
    .function {
      height: 100%;
      margin: 0 auto;
      padding-right: 1rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      button {
        height: 3.4rem;
      }
      .set {
        color: #8590a6;
      }
      .submit {
        width: 8rem;
        margin-left: 2.2rem;
        background-color: #0084ff;
        color: #fff;
      }
      .pop {
        // width: 19rem;
        .li-list {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          position: relative;
          list-style: none;
          padding-left: 2.5rem;
          cursor: pointer;
          height: 4rem;
          line-height: 4rem;
          &:hover {
            background-color: #f6f6f6;
          }
          text-align: center;
          .check {
            position: absolute;
            left: 0.5rem;
            top: 1.2rem;
          }
        }
      }
    }
  }
  .quit {
    position: absolute;
    right: 1.8rem;
    top: 1.8rem;
    border-radius: 0.4rem;
    height: 3rem;
    line-height: 3rem;
    padding: 0 0.8rem;
    background-color: #ebebeb;
    color: #8590a6;
    &:hover {
      color: grey;
    }
  }
  .enter-full {
    position: absolute;
    right: 1.8rem;
    top: 7.6rem;
    border-radius: 0.4rem;
    height: 3rem;
    padding: 0 0.8rem;
    color: #8590a6;
    &:hover {
      color: grey;
    }
  }
  .fix {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 0.1rem 0.3rem rgba(18, 18, 18, 0.1);
  }
  .quill-editor {
    z-index: 2;
    min-height: 24rem;
    height: 100%;
    padding: 0 1rem;
    .ql-container {
      min-height: 24rem;
      height: 100%;
    }
  }
}
</style>